<div class="WideDown">
    <script type="text/javascript">
        maxTime = {$smarty.now};
        minTime = {$meta.first};
        id = "{$identifier}";
    {literal}
        $().ready(function() {
        open = $(".opentask");
        begun = $(".beguntask");
        end = $(".endtask");
        timePrPixel = (maxTime-minTime)/ $("."+id).width();

        for(i=0;i<open.length;i++){
            $(open[i]).width((open[i].title-minTime)/timePrPixel);
            $(begun[i]).width((begun[i].title-open[i].title)/timePrPixel);
            $(end[i]).width((end[i].title-begun[i].title)/timePrPixel);
            d = new Date(open[i].title*1000);
            open[i].title = "Oprettet : "+d.getDate()+"/"+d.getMonth()+"/"+d.getFullYear();
            d = new Date(begun[i].title*1000);
            begun[i].title = "Påbegyndt : "+d.getDate()+"/"+d.getMonth()+"/"+d.getFullYear();
            d = new Date(end[i].title*1000);
            end[i].title = "Afsluttet : "+d.getDate()+"/"+d.getMonth()+"/"+d.getFullYear();
        }
        });
        {/literal}
    var d1 = {$flot.create};
    var d2 = {$flot.begun};
    var d3 = {$flot.done};

        {literal}


        $(function () {

    $.plot($("#placeholder"),
    [{label:'Oprettet', data: d1},
    {label:'Begyndt',data:d2},
    {label:'Færdige', data :d3}],
    {xaxis: {
            mode: "time",
            timeformat: "%y/%m/%d"
          }
    }
    );
});
function dateToUnix(from, to){
    date = from.value;
    date = date.split('/',3);
    d = new Date(date[2],date[1]-1,date[0]);
    unix = d.getTime()/1000;
    to = document.getElementById(to);
    if(typeof(unix)=='number'){
        to.value = unix;
    }
    else to.value = "";
}

    </script>
    <style type="text/css">
    .opentask{
        background-color:white;
        float:left;
    }
    .beguntask {
        float:left;
        background-color:#20A5FF;
    }
    .endtask{
        float:left;
        background-color:#79FC4E;
    }
    .prog{
        background-color:none;
        width:100%;
        }
    </style>
    {/literal}

    {foreach from=$data item=d key=g}
    <h3>{$g}</h3>
    <table border="1">
        <tr><td>Slet</td><td>Opgave</td><td>Oprettet af</td><td>Dato oprettet</td><td>Dato begyndt</td><td>Dato afsluttet</td><td class="{$identifier}" width="100%">Progress</td></tr>
        {foreach from=$d item=el}
        <tr>
            <td><input type="checkbox" name="{$identifier}[delete][]" value="{$el.ID}" /></td>
            <td>{$el.Task}</td>
             <td>{$el.CreatedBy}</td>
             <td>{$el.CreatedDate|date_format:"%D"}</td>
             <td>{if $el.BegunDate eq 0}

             </td><td><td></td>
            {else}{$el.BegunDate|date_format:"%D"}</td>
             <td>{if $el.DoneDate  eq 0}
                 <td></td>
                {else}
                {$el.DoneDate|date_format:"%D"}

                {/if}</td>
             {/if}
                <td><div class="prog"><div rel="tipDown" class="opentask" title="{$el.CreatedDate}">&nbsp;</div>
                    <div rel="tipDown" class="beguntask"{if $el.BegunDate ne 0} title="{$el.BegunDate}">&nbsp;</div>
                    {else}
                    title="{$smarty.now}">
                     &nbsp;</div>
                    {/if}
                    <div rel="tipDown" class="endtask"{if $el.DoneDate ne 0} title="{$el.DoneDate}">&nbsp;</div>{else}
                    title="{$smarty.now}">
                     &nbsp;</div>
                    {/if}

                    </div>
                    </div>
                </td>
        </tr>
        {/foreach}
    </table>
    {/foreach}
    <div id="placeholder" style="width:600px;height:300px"></div>
</div>